<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddedDialog()">创建库</el-button>
			<el-divider direction="vertical"></el-divider>
		</template>
		<template slot="query">
			<el-form size="small" inline class="lib_query_form">
				<el-form-item label="库分类">
					<el-select v-model="checkedType" placeholder="请选择" style="width: 120px">
						<el-option v-for="(item, index) in libraryTypes()" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入库名称" clearable v-model="queryLibraryName">
						<el-button slot="append" icon="el-icon-search" @click="queryLibraryData()"></el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</template>
		<template slot="mode">
			<show-mode size="32" v-model="showType"></show-mode>
		</template>
		<template slot="component">
			<library-content :list="tableData" :mode="showType" @look="handleLookLibrary">
				<template v-slot:handle="{ data }">
					<el-dropdown size="medium" @command="handleLibraryCommand($event, data)">
						<span class="el-icon-more"></span>
						<el-dropdown-menu slot="dropdown">
							<template v-if="data.createId === userInfo.id">
								<el-dropdown-item command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
								<el-dropdown-item command="rename" icon="el-icon-edit-outline">重命名</el-dropdown-item>
								<el-dropdown-item command="download" icon="el-icon-download">下载</el-dropdown-item>
								<el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
							</template>
							<template v-else>
								<el-dropdown-item command="detail" icon="el-icon-view">查看</el-dropdown-item>
							</template>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</library-content>
		</template>
		<template slot="page">
			<sw-pagination
				:total="dataCount"
				:page-sizes="queryPages"
				:page.sync="queryData.page"
				:limit.sync="queryData.limit"
				@change="queryTableData()"
			></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" :lib-name="libraryName" :disabled="isDetail" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import { mapGetters } from 'vuex';
import libraryContent from './content';
import listMixins from '@/mixins/listMixins';
import { getLibraryList, realDeleteLibrary, updateLibraryName } from '@/api/data/tbNetDiskDir';
const getStrLength = (str) => {
	let char = str.replace(/[^\x00-\xff]/g, '**');
	return char.length;
};
export default {
	components: { formDialog, libraryContent },
	inject: ['libraryTypes'],
	mixins: [listMixins],
	data() {
		return {
			showType: '1',
			isDetail: false,
			libraryName: '',
			checkedType: '-1',
			pageName: '资源库',
			queryLibraryName: '',
			queryPages: [60, 120, 240],
			queryData: { page: 1, limit: 60 }
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		listFunction() {
			return eval(getLibraryList);
		},
		deleteFunction() {
			return eval(realDeleteLibrary);
		},
		requestParams() {
			let params = { ...this.queryData };
			params['libraryId'] = this.checkedType;
			return { ...params, type: '1' };
		}
	},
	watch: {
		requestParams() {
			this.queryTableData();
		}
	},
	methods: {
		//新增资源库
		handleAddedDialog() {
			this.isDetail = false;
			this.handleOpenDialog();
		},
		//按名称查询资源库
		queryLibraryData() {
			this.$set(this.queryData, 'name', this.queryLibraryName);
		},
		//进入库资源页面
		handleLookLibrary(data) {
			let path = `/data/resourcelib/${data.id}`;
			this.$router.push({ path, query: { name: data.name } });
		},
		//下拉操作
		handleLibraryCommand(command, data) {
			this.isDetail = false;
			this.libraryName = '';
			if (command === 'edit') {
				this.libraryName = data.name;
				this.handleOpenDialog(data.id);
			} else if (command === 'rename') {
				this.handleRenameLibrary(data);
			} else if (command === 'download') {
				this.handleDownloadLibrary(data);
			} else if (command === 'delete') {
				this.handleDeleteData(data);
			} else if (command === 'detail') {
				this.libraryName = data.name;
				this.handleLookLibInfo(data);
			}
		},
		//重命名文本框验证
		inputValidator(value) {
			let regexp = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
			if (!value) {
				return '请输入库名称';
			} else if (getStrLength(value) >= 25) {
				return '输入的库名称超过25字符';
			} else if (!regexp.test(value)) {
				return '库名称输入字符出现错误';
			}
		},
		//重命名库
		handleRenameLibrary(data) {
			let that = this;
			that.$prompt('请输入字符不超过25的汉字、数字、字母或下划线', '重命名', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputValue: data.name,
				inputValidator: that.inputValidator,
				async beforeClose(action, instance, done) {
					let name = instance.inputValue;
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.renameRequest(data.id, name);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},
		//重命名请求
		async renameRequest(id, name) {
			let params = { id, name };
			let result = await updateLibraryName(params).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.$message.success('重命名库成功');
			}
		},
		//下载库
		handleDownloadLibrary(data) {
			this.$alert('下载功能开发中', '提示', {
				confirmButtonText: '确定',
				callback: (action) => {}
			});
		},

		//查看信息
		handleLookLibInfo(data) {
			this.isDetail = true;
			this.dataId = data.id;
			this.formDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.lib_query_form {
	display: flex;
	justify-content: space-between;
	flex: 1;
}
</style>
